<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小R图书购物商城</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="header w">
        <div class="logo">
            <img src="./images/logo.png" width="120px" height="80px" alt="">
        </div>
        <div class="search">
            <input type="text" placeholder="请输入图书名字">
            <button><img src="./images/btn.png" alt=""></button>
        </div>
        <div class="nav">
            <ul>
                <li><a href="./index.html">首页</a></li>
                <li><a href="./html/login.html">登录/注册</a></li>
                <li><a href="./html/settlement.html">购物车</a></li>
                <li><a href="./html/shop.html">商城</a></li>
                <li><a href="./html/person.html">联系客服</a></li>
                <li><a href="./html/service.html">售后</a></li>
            </ul>
        </div>
        <div class="user">
            <img src="./images/user.jpg" width="45px" height="45px" alt="">
            <a href="./html/person.html">小R2022131328</a>
        </div>
    </div>
        <div class="banner">
            <div class="w">
                <div class="wrap">
                    <div class="arraw prev">
            
                        < </div>
            
                            <div class="arraw next"> ></div>
            
                            <div class="dots">
            
                                <div class="dot now"></div>
            
                                <div class="dot"></div>
            
                                <div class="dot"></div>
            
                                <div class="dot"></div>
            
                            </div>
                        
                    </div>
          
                </div>
              
            </div>
        </div>
    </div>

 <!-- tag 模块开始 -->
       <div class="tag w">
    <h3>个性推荐</h3>
    <div class="goods-item">
        <a href="#">儿童</a>
        <a href="#">小学</a>
        <a href="#">初中</a>
        <a href="#">高中</a>
        <a href="#">情感</a>
        <a href="#">小说</a>
        <a href="#">名著</a>
        <a href="#">练习题</a>
        <a href="#">课外书</a>
    </div>
    <a href="#" class="mod">其他类型</a>
</div>
<!-- tag 模块结束 -->
<!-- recommend 模块开始 -->
<div class="recommend w">
    <!-- 公共的头部 -->
    <div class="floorhd">
        <h3>猜你喜欢</h3>
        <a href="#" class="more">查看全部</a>
    </div>
    <!-- 内容inner区域 -->                                                                                                                                                                                                  
    <div class="reco-inner clearfix">
        <ul>
            <li>
                <a href="#">
                    <img src="./images/11.png" width="200px" height="160px" alt="">
                    <h4>  《我在北京送快递》 </h4>
                    <p> <span>¥11.68</span>  起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/22.png" width="200px" height="160px" alt="">
                    <h4>   《明亮的夜晚》 </h4>
                    <p> <span>¥10.00</span>  起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/33.png" width="200px" height="160px" alt="">
                    <h4>《我还能看到多少次满月升起》</h4>
                    <p> <span>¥21.83</span>  起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/44.png" width="200px" height="160px" alt="">
                    <h4>《趣味漫画心理学》</h4>
                    <p> <span>¥23.24</span>  起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/55.png" width="200px" height="160px" alt="">
                    <h4>《哈利·波特与死亡圣器》</h4>
                    <p> <span>¥66.00</span>  起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/66.png" width="150px" height="160px" alt="">
                    <h4>《活着》</h4>
                    <p> <span>¥20.00</span>  起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/77.png" width="200px" height="160px" alt="">
                    <h4>《小狗钱钱》</h4>
                    <p> <span>¥28.00</span>  起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/88.png" width="150px" height="160px" alt="">
                    <h4>《三体·黑暗森林》</h4>
                    <p> <span>¥32.00</span>  起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/99.png" width="200px" height="160px" alt="">
                    <h4>《帅狗杜明尼克》</h4>
                    <p> <span>¥15.00</span>  起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/10.png" width="150px" height="160px" alt="">
                    <h4>《雷雨》</h4>
                    <p> <span>¥35.00</span>  起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/111.png" width="150px" height="160px" alt="">
                    <h4>教材帮 必修1 物理 RJ (人教)</h4>
                    <p> <span>¥24.60</span>  起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/12.png" width="200px" height="160px" alt="">
                    <h4>5年高考3年模拟：高中物理必修1（RJ高中同步新课标）</h4>
                    <p> <span>¥27.00</span>  起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/13.png" width="200px" height="160px" alt="">
                    <h4>5年高考3年模拟：高中化学必修2（人教版）</h4>
                    <p> <span>¥22.00</span>  起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/14.png" width="200px" height="160px" alt="">
                    <h4>16学霸笔记--高中数学（通用版）</h4>
                    <p> <span>¥29.80</span>  起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/15.png" width="150px" height="160px" alt="">
                    <h4>《嫌疑人X的献身》</h4>
                    <p> <span>¥35.00</span>  起</p>
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- recommend 模块结束 -->
        <!-- 底部模块over   -->
    <div class="footer">
        <div class="w">
            <div class="footer-l">
                <img src="./images/logo.png" width="120px" height="80px" alt="">
                <p>图书购物商城致力于让每个读书人更加便利的获得自己需要的书 <br>
                    © 2023年RKQ.保留所有权利</p>

                <a href="#" class="download">
                    下载APP
                </a>
            </div>

            <div class="footer-r">
                <dl>
                    <dt>关于图书购物商城</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>新手指南</dt>
                    <dd><a href="#">如何注册</a></dd>
                    <dd><a href="#">如何登录</a></dd>
                    <dd><a href="#">如何售后</a></dd>
                    <dd><a href="#">怎么联系客服</a></dd>
                    <dd><a href="#">怎么加入购物车</a></dd>
                </dl>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作网站</a></dd>
                    <dd><a href="#">合作公司</a></dd>
                </dl>
            </div>
        </div>
    </div>
    <div class="tool">
        <a href="./html/settlement.html" class="on tool-item1">购物车</a>
        <a href="./html/contact.html" class="tool-item2">联系<br>客服</a>
        <a href="./html/person.html" class="tool-item3">个人<br>资料</a>
        <a id="goTop" class="tool-item4" onclick="goTop()"><span class="top-arrow"></span>顶部</a>
        <a href="./html/service.html" class="tool-item5">反馈</a>
        <a href="./index.html" class="tool-item5">首页</a>
    </div>
</body>
<script>

    var data = ['images/l1.png',

        'images/l2.png',

        'images/l3.png',

        'images/l4.png'

    ]

    var dWrap = document.querySelector('.wrap');

    var dPrev = document.getElementsByClassName('prev')[0];

    var dNext = document.getElementsByClassName('next')[0];

    var dots = document.querySelectorAll('.dot');

    var showIndex = 0; //当前显示图片的下标

    var timer = null;

    timer = setInterval(function() {
        dots[showIndex].classList.remove("now");

        showIndex = showIndex + 1;

        //越界处理

        showIndex = showIndex === data.length ? 0 : showIndex;

        changeBg(data[showIndex]);

        dots[showIndex].classList.add("now");

    }, 2000)

    //点击事件

    for (var i = 0; i < dots.length; i++) {
        dots[i].index = i;

        dots[i].onclick = function() {
            dots[showIndex].classList.remove("now");

            showIndex = this.index;

            changeBg(data[showIndex]);

            dots[showIndex].classList.add("now");

        }

    }

    dPrev.onclick = function() {
        //修改dot状态

        // dots[showIndex].className = 'dot';

        dots[showIndex].classList.remove("now");

        showIndex = showIndex - 1;

        showIndex = showIndex === -1 ? data.length - 1 : showIndex;

        changeBg(data[showIndex]);

        dots[showIndex].classList.add("now");

    }

    dNext.onclick = function() {
            dots[showIndex].classList.remove("now");

            showIndex = showIndex + 1;

            //越界处理

            showIndex = showIndex === data.length ? 0 : showIndex;

            changeBg(data[showIndex]);

            dots[showIndex].classList.add("now");

        }

        //改变dWrap背景图

    function changeBg(pic) {
        dWrap.style.backgroundImage = `url(${pic})`;

        // 改变指示点

    }

    changeBg(data[0]);

</script>

</html>